<template>
	<uni-grid :showBorder="Boolean(data.border)" :column="data.col">
		<uni-grid-item v-for="(item, index) in data.list" :key="index" @tap="go(item)">
			<view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
				<view class="img-box">
					<view class="tag-box" v-if="item.badge.show"
						:style="[{ background: item.badge.bgColor, color: item.badge.color }]">
						{{ item.badge.text }}
					</view>
					<image class="menu-image" :src="sheep.$url.cdn(item.src)"></image>
				</view>

				<view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
					<view class="grid-text" :style="[{ color: item.title.color }]">
						{{ item.title.text }}
					</view>
					<view class="grid-tip" :style="[{ color: item.tip.color }]">
						{{ item.tip.text }}
					</view>
				</view>
			</view>
		</uni-grid-item>
	</uni-grid>

	<!-- 入驻商家弹窗 -->
	<su-popup type="center" :show="show" @maskClick="show==false" @close="show=false" round="20">
		<view class="popup-grade ss-flex-col">
			<view class="top-view ss-flex-row ss-row-center ss-col-center">
				<image :src="sheep.$url.cdn('/static/user/grade-popup.png')" class="grade-img"></image>
			</view>
			<view class="popup-grade-tips">温馨提示</view>
			<view class='popup-grade-label'>未开通权限，请先入驻商家</view>
			<view class="popup-grade-btn" @click="gotoApply">去申请</view>
		</view>
	</su-popup>

	<!-- 添加底部弹出层 -->
	<uni-popup ref="popup" type="bottom">
		<view class="popup-content">
			<image class="qr_code_img" :src="sheep.$url.cdn('/static/img/customer.png')" mode="widthFix" />
			<div class="popup-title" @tap="popup.close()">关闭</div>
		</view>
	</uni-popup>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		ref,
		watch,
		computed,
		onMounted
	} from 'vue';
	import {
		showAuthModal
	} from '@/sheep/hooks/useModal';
// #ifdef 
import imStore from "@/im/store/im.js"
// #endif
	const grade = ref(null);

	const show = ref(false);
	// 添加 popup 引用
	const popup = ref(null);

	// watch(() => sheep.$store('user').isLogin, (newVal) => {
	// 	if (newVal == true) {
	// 		getOwnStoreInfo();
	// 	}
	// })

	function go(item) {

		if (item.title.text == '联系客服') {
			// 显示底部弹出层
			popup.value.open();
		} else if (item.title.text == '创客群') {
			let to = {
				aim: 'groupMessage',
				service: {
					mobile: 'GROUP@TGS#2SG7TQJQR',
				},
			};
			// #ifdef APP
				  imStore().webQueryAnalysis(to)
			  // #endif
			// #ifndef APP
			sheep.$router.go('/im/pages/web', {
				to: encodeURIComponent(JSON.stringify(to)),
			});
			// #endif
		} else if (item.url == 'daiban') {
			uni.navigateToMiniProgram({
				appId: 'wx7a68bf24ed56309f',
				path: '/pages/taxation/licenseList',
				envVersion: 'release',
				success(res) {
					console.log('跳转成功', res);
				},
				fail(err) {
					console.error('跳转失败', err);
				}
			});
		} else if (item.url == "/pages/merchant/pay_history_list") {
			
			
			if (sheep.$store('user').isLogin == false) {
				showAuthModal()
			} else {
				sheep.$router.go("/pages/merchant/pay_history_list")
				// if(!grade.value){
				//     show.value = true;
				// }else{
				// 	sheep.$router.go("/pages/merchant/pay_history_list")
				// }
				// checkShop();
			}
		} 
		else if(item.url=='/pages/store/myshop'){
			if(sheep.$store('user').isLogin == false){
				showAuthModal()
			}
			// else{
			// 	if(JSON.parse(uni.getStorageSync('user-store')).userInfo.store_id!==""){
			// 		show.value = true;
			// }
			// else{
				sheep.$router.go("/pages/store/myshop")
			// }
			// }
			
		}
		else {
			sheep.$router.go(item.url);
		}
	}

	function gotoApply() {
		show.value = false;
		sheep.$router.go('/pages/commission/giveaway/index');
	}

	const props = defineProps({
		data: {
			type: Object,
			default () {},
		},
	});

	async function checkShop() {
		let {
			error,
			data
		} = await sheep.$api.pay.checkShop();
		
		if(error==0){
			if(data&&data.length==0){
				show.value = true;
			}else{
				sheep.$router.go("/pages/merchant/pay_history_list");
			}
			
		}
		
	}

	// async function getOwnStoreInfo() {
	// 	if (sheep.$store('user').isLogin==true) {
	// 		let {
	// 			error,
	// 			data
	// 		} = await sheep.$api.store.getOwnStoreInfo()
	// 		if (error == 0) {
	// 			grade.value = data?.grade||false;
	// 		}
	// 	}
	// }

	onMounted(() => {
		// if(sheep.$store('user').isLogin==true){
		// 	getOwnStoreInfo();
		// }
	})
</script>

<style lang="scss" scoped>
	.menu-image {
		width: 24px;
		height: 24px;
	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;

		.img-box {
			position: relative;

			.tag-box {
				position: absolute;
				z-index: 2;
				top: 0;
				right: 0;
				font-size: 2em;
				line-height: 1;
				padding: 0.4em 0.6em 0.3em;
				transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
				transform-origin: 100% 0;
				border-radius: 200rpx;
				white-space: nowrap;
			}
		}

		.title-box {
			.grid-tip {
				font-size: 24rpx;
				white-space: nowrap;
				text-align: center;
			}
		}
	}

	// 添加弹出层样式
	.popup-content {
		width: 550rpx;
		margin: 0 auto 250rpx;
		padding: 30rpx;
		background-color: #fff;

		.popup-title {
			text-align: center;
			font-size: 32rpx;
			color: #333;
		}

		.qr_code_img {
			width: 100%;
			height: auto;
		}
	}

	.popup-grade {
		width: 651rpx;
		border-radius: 20rpx;
		background: linear-gradient(180deg, #D4E1FF 0%, #FFFFFF 41%);
		box-shadow: 0rpx 4rpx 50rpx 0rpx rgba(0, 0, 0, 0.3);

		.top-view {
			margin-top: -50rpx;
			width: 100%;
			height: 119.92rpx;

			.grade-img {
				width: 127.84rpx;
				height: 119.92rpx;
			}
		}

		.popup-grade-tips {
			width: calc(100% - 42rpx);
			margin-left: 42rpx;
			font-family: Source Han Sans;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 52rpx;
			letter-spacing: normal;
			color: #171717;
		}

		.popup-grade-label {
			width: calc(100% - 42rpx);
			margin-left: 42rpx;
			margin-top: 2rpx;
			font-family: Source Han Sans;
			font-size: 30rpx;
			font-weight: normal;
			line-height: 43rpx;
			letter-spacing: normal;
			color: #171717;
		}

		.popup-grade-btn {
			width: calc(100% - 85rpx - 85rpx);
			margin-top: 36rpx;
			margin-right: 85rpx;
			margin-left: 85rpx;
			margin-bottom: 77rpx;
			height: 90rpx;
			border-radius: 100rpx;
			background: #426DFA;
			box-shadow: 0rpx 25rpx 50rpx 0rpx rgba(74, 116, 254, 0.41);

			display: flex;
			justify-content: center;
			align-items: center;

			font-family: Source Han Sans;
			font-size: 30rpx;
			font-weight: bold;
			line-height: normal;
			letter-spacing: normal;
			color: #FFFFFF;
		}

	}
</style>